<template>
    <div class="personalHome">
        <Personal-Header bgColor="#5741d9"></Personal-Header>
        <Personal-Side></Personal-Side>
        <div class="content">
            <h2 class="pagetitle">{{$t('l.header_18')}}</h2>
            <div class="personCon">
                <div class="infopanel">
                    <h2 class="persontitle">{{$t('l.personal_181')}}</h2>
                    <div class="myinfocon">
                        <p class="title">{{$t('l.personal_182')}}</p>
                        <div class="putgroup padbtm">
                            <input class="comput small" v-model="name">
                            <p class="errortext"></p>
                        </div>
                        <p class="title">{{$t('l.personal_183')}}</p>
                        <div class="headimg clearfix">
                            <div class="current">
                                <img class="userlogo" :src="intro.pic" v-if="intro.pic"/>
                                <img class="userlogo" v-else src="../../assets/images/userlogo.png" />
                            </div>
                            <div class="uploadhead">
                                <label for="uploadhead">
                                    <input type="file" id="uploadhead" hidden @change="handleFileChange($event)">
                                    <div class="uploadbar">
                                        <img src="../../assets/images/addico.png">
                                        <p>{{$t('l.personal_184')}}</p>
                                    </div>
                                    <span class="showupimg" v-show="uploadhead">
                                        <img :src="curimg">
                                    </span>
                                </label>
                            </div>
                            <p class="uploadtip">{{$t('l.personal_185')}}</p>
                        </div>
                        <a class="btn changebtn" @click="editInfo">{{$t('l.personal_186')}}</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import PersonalHeader from "@/components/personalHeader";
import PersonalSide from "@/components/personalSide";
import lrz from 'lrz';
import {api} from '@/api/api';
export default {
    components: {
        PersonalHeader,
        PersonalSide
    },
    data(){
        return {
           uploadhead:false,
           headimgurl:"" ,
           intro:"",
           name:"",
           curimg:""
        }
    },
    created(){
        this.intro = this.$store.state.userintro;
        if(this.intro.userName){
            this.name = this.intro.userName
        }else if(this.intro.cellPhone){
            this.name = this.intro.cellPhone
        }else if(this.intro.email){
            this.name = this.intro.email
        }
    },
    methods:{
        handleFileChange(data){
            let that = this;
            let file = data.target.files; 
            if (!file || !window.FileReader) return;
            if (/^image/.test(file[0].type)) {
                // 创建一个reader
                var reader = new FileReader();
                reader.readAsDataURL(file[0]);
                reader.onloadend = function (e) {
                    that.curimg = e.target.result;
                    lrz( file[0], [ ] )  
                        .then(function(rst) {
                            //成功时执行
                            that.uploadImg(rst.base64);
                        }).catch(function(error) {
                            //失败时执行

                        }).always(function() {
                            //不管成功或失败，都会执行

                        })
                };
            }
        },
        //上传
        async uploadImg(data){
            let that = this;
            let res = await api.uploadImg({
                file:data
            })
            if(res.data.code==0){
                that.uploadhead = true;
                that.headimgurl = res.data.data;
            }else{
                that.$layer.msg(res.data.msg);
            }
        },
        //修改信息
        async editInfo(data){
            let that = this;
            let res = await api.updateInfo({
                nickName:that.name,
                pic:that.headimgurl
            })
            if(res.data.code==0){
                that.$layer.msg(that.$t('l.add_81'));
                that.$router.push({
                    path: "/personal"
                });
            }else{
                that.$layer.msg(res.data.msg);
            }
        },
    }
}
</script>
<style lang="less">
.personalHome {
	padding-top: 100px;
}
.personCon{
    padding:24px 30px;
    box-sizing: border-box;
    height: 90%;
    .infopanel{
        background:#fff;
        padding:40px 46px 46px 34px;
        min-height: 100%;
        box-sizing: border-box;
        .myinfocon{
            width:410px;
            margin:43px auto;
            .title{
                font-size:14px;
                font-weight:400;
                color:rgba(51,56,94,1);
                line-height:20px;
                padding-bottom:5px;
            }
            .padbtm{
                padding-bottom:32px;
            }
            .headimg{
                padding-top:6px;
                .current{
                    float:left;
                    border-radius:3px;
                    border:1px solid rgba(221,224,235,1);
                    width:80px;
                    height:80px;
                    margin-right:20px;
                    padding:10px;
                    box-sizing: border-box;
                    img{
                        width:60px;
                        height:60px;
                        border-radius:50%;
                    }
                }
                .uploadhead{
                    float:left;
                    border-radius:3px;
                    border:1px solid rgba(221,224,235,1);
                    width:80px;
                    height:80px;
                    margin-right:10px;
                    padding:10px;
                    box-sizing: border-box;
                    position:relative;
                    .uploadbar{
                        text-align:center;
                        width:100%;
                        height:100%;
                        img{
                            width:20px;
                            height:20px;
                            padding-bottom:8px;
                            margin-top: 4px;
                        }
                        p{
                            font-size:12px;
                            font-weight:400;
                            color:rgba(51,56,94,1);
                            line-height:18px;
                        }
                    }
                    .showupimg{
                        position:absolute;
                        top:0;
                        left:0;
                        right:0;
                        bottom:2px;
                        z-index:9;
                        text-align:center;
                        line-height:76px;
                        background:#fff;
                        img{
                            max-width:100%;
                            max-height:100%;
                            vertical-align: middle;
                        }
                    }
                }
                .uploadtip{
                    font-size:12px;
                    font-weight:400;
                    color:rgba(51,56,94,1);
                    line-height:19px;
                    padding-top:21px;
                }
            }
            .changebtn{
                width:100%;
                height:40px;
                margin-top:50px;
                line-height:40px;
            }
        }
    }
}
</style>



